<template>
  <div ref="chartEl" class="map-view" />
  <div class="select-area">
    <el-select class="map-area-select" v-model="areaCode" placeholder="请选择地区">
      <el-option v-for="(item, index) in areaList" :key="index" :label="item.areaName" :value="item.areaCode" />
    </el-select>
  </div>
  <div class="goback" v-if="areaCode != '330300'" @click="changeArea" />
</template>

<script>
import { defineComponent, ref, computed, watch, onMounted } from "vue";
import * as echarts from 'echarts';
import { Map3DChart } from 'echarts-gl/charts';
import wenzhou from './geoJson/WenZhou'
import wenzhou2 from './geoJson/温州市' //  没有区分瓯江口、浙南
import { getAreaAppData } from '@/api/statistics'
import symbolImg from '@/assets/screendeck/map-point.svg'
echarts.use([Map3DChart]);

export default defineComponent({
  name: 'MapView',
  props: {
    time: {
      type: Object,
      default: () => { }
    },
    modelValue: { // 地区code
      type: String,
      default: '330300'
    },
    longTime: {
      type: Boolean,
      default: false
    },
    down: {
      type: Boolean,
      default: true
    },
    refresh: {
      type: Number,
    },
    areas: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const chartEl = ref(null);
    const myChart = ref(null);
    const mapName = ref('all')
    const geoCoordMap = {
      鹿城区: [120.444231, 28.143352],
      市辖区: [120.554231, 28.093352],
      // 龙湾区: [120.746469, 27.980254],
      龙湾区: [120.846469, 27.940254],
      // 浙南: [120.833469, 27.890254],
      瓯海区: [120.657145, 27.926444],
      // 瓯江口: [120.956181, 27.936057],
      // 洞头区: [121.136181, 27.936057],
      洞头区: [121.106181, 27.906057],
      永嘉县: [120.540968, 28.373886],
      平阳县: [120.264387, 27.6593],
      苍南县: [120.526256, 27.307743],
      龙港市: [120.625981, 27.55511],
      文成县: [120.10245, 27.889133],
      泰顺县: [119.78624, 27.557309],
      瑞安市: [120.346171, 27.879321],
      乐清市: [121.067147, 28.416083]
    }
    const areaCode = computed({
      get: () => props.modelValue,
      set: (val) => emit('update:modelValue', val)
    })
    const aspectScale = ref(1.5)
    const zoom = ref(1.2)
    const layoutSize = ref('120%')
    // const areaList = computed({
    //   get: () => props.areas,
    //   set: (val) => emit('update:areas', val)
    // })
    const areaList = ref([])
    const option = computed(() => {
      return {
        geo: [
          {
            map: mapName.value,
            zoom: zoom.value,
            zlevel: -1,
            aspectScale: aspectScale.value,
            layoutSize: layoutSize.value,
            layoutCenter: ['50%', '50%'],
            label: {
              show: false,
              fontSize: 16,
              fontWeight: 'bold',
              color: '#b9eaf7',
              formatter: (item) => {
                return item.name.substring(0, 2)
              },
            },
            itemStyle: {
              areaColor: '#001F6B', // RGBA(0, 74, 216, 1)
              borderWidth: 2,
              borderColor: '#2BD4FF',
              shadowColor: '#37DBFF', // #044B4D
              shadowOffsetY: 0,
              shadowOffsetX: 2,
              shadowBlur: 3,
            },
          },
          // 第二层制造3d效果
          {
            silent: true,
            map: mapName.value,
            zoom: zoom.value,
            zlevel: -2,
            aspectScale: aspectScale.value,
            layoutSize: layoutSize.value,
            layoutCenter: ['50%', '50%'],
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: '#002C81', // RGBA(0, 74, 216, 1)
              // 设置外层边框
              borderWidth: 1,
              borderColor: '#002C81',
              shadowColor: '#002C81', // #044B4D
              shadowOffsetY: 5,
              shadowOffsetX: 5,
              shadowBlur: 1,
            },
          },
          // 第三层显示黑色阴影
          {
            silent: true,
            map: mapName.value,
            zoom: zoom.value,
            zlevel: -3,
            aspectScale: aspectScale.value,
            layoutSize: layoutSize.value,
            layoutCenter: ['51%', '53%'],
            label: {
              show: false,
            },
            itemStyle: {
              areaColor: '#002C81', // RGBA(0, 74, 216, 1)
              // 设置外层边框
              shadowColor: 'rgba(0,0,0,1)', // #044B4D
              shadowOffsetY: 5,
              shadowOffsetX: 5,
              shadowBlur: 5,
            },
          },
        ],
        series: [
          {
            type: 'map',
            map: mapName.value,
            selectedMode: 'single',
            // 地图缩放比例
            zoom: zoom.value,
            aspectScale: aspectScale.value,
            layoutSize: layoutSize.value,
            layoutCenter: ['50%', '50%'],
            // 提示框
            tooltip: {
              triggerOn: 'mousemove',
              backgroundColor: 'rgba(8, 8, 8, .85)',
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
            },

            /**** 默认状态下地图 ****/
            // 标签
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold',
              color: '#b9eaf7',
              formatter: (item) => {
                return item.name.substring(0, 2)
              },
            },
            // 区域块
            itemStyle: {
              //  区块颜色
              areaColor: '#001F6B',
              borderColor: '#2BD4FF',
              borderWidth: 1,
              // 线条发光
              shadowColor: 'RGBA(0,70,255, 1)',
              shadowOffsetY: -3,
              shadowOffsetX: 3,
              shadowBlur: 10,
            },

            /**** 选中状态下地图 ****/
            select: {
              // 标签在选中状态下的样式
              label: {
                color: '#fff'
              },
              // 选中状态下地图上区域块的样式
              itemStyle: {
                areaColor: '#FFA600',
                color: '#fff',
              },
            },
            /**** 鼠标滑过状态下地图 ****/
            emphasis: {
              itemStyle: {
                areaColor: '#FFA600',
              },
              label: {
                color: '#fff'
              },
            },
            data: mapData.value
          },

          // 柱状体的顶部
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: true,
              fontSize: 14,
              color: '#FFA600',
              fontWeight: '800',
              formatter: (params) => {

                const target = areaData.value.find(item => item.name === params.name)
                // console.log(params)
                return target ? `{fname|${target.name}}\n{fdata|(${target.value})}` : ''
              },
              position: "top",
              rich: {
                fname: {
                  color: '#FFA600',
                  textAlign: 'center',
                  fontWeight: '800',
                  fontSize: 14,
                },
                fdata: {
                  color: '#FFA600',
                  fontSize: 16,
                  align: 'center',
                  fontWeight: '800',
                }
              },
            },
            symbol: 'image://' + symbolImg,
            symbolSize: [18, 30],
            itemStyle: {
              color: 'rgba(255, 212, 136, 1)',
              opacity: 1
            },
            silent: true,
            data: scatterData()
          },
        ]
      }
    })
    const mapData = ref([])
    // 柱状体的顶部
    const scatterData = () => {
      const data = areaData.value.map((item) => {
        if (geoCoordMap[item.name]) {
          return {
            name: item.name,
            value: [geoCoordMap[item.name][0], geoCoordMap[item.name][1]],
            code: item.code,
            selected: item.code == areaCode.value
          }
        }
      })
      mapData.value = data
      return data
    }

    const seriesIndex = ref(null)
    // 初始化echarts相关配置
    const init = () => {
      myChart.value = echarts.init(chartEl.value);
      echarts.registerMap(mapName.value, wenzhou2)
      myChart.value.setOption(option.value);
      highlitArea()
    }
    //  高亮当前区域
    const highlitArea = () => {
      myChart.value.on('selectchanged', function (params, data) {
        let areaCode = null
        if (params.fromAction != 'unselect') {
          seriesIndex.value = params?.fromActionPayload?.dataIndexInside
          const areaName = areaData.value[seriesIndex.value]?.name
          const areaItem = areaList.value.find(item => item.areaName == areaName)
          areaCode = areaItem ? areaItem?.areaCode : null
        }
        emit('update:modelValue', areaCode)
      });
    }
    // 返回全市
    const changeArea = () => {
      emit('update:modelValue', '330300')
    }

    const areaData = ref([])
    const getSvcData = async () => {
      const { endDate, startDate } = props.time
      const para = {
        endDate,
        startDate
      }
      const res = await getAreaAppData(para)
      if (res.status === 200) {
        areaData.value = [
          // {
          //   name: '浙南',
          //   value: 0
          // },
          // {
          //   name: '瓯江口',
          //   value: 0
          // },
        ]
        areaList.value = [{
          areaCode: "330300",
          areaName: "温州市"
        }]
        res.data.x.map((item, index) => {
          const I = props.areas.findIndex(area => area.areaName == item)
          I != -1 ? areaList.value.push(props.areas[I]) : ''
          areaData.value.push({
            name: item,
            code: I != -1 ? props.areas[I].areaCode : null,
            value: parseFloat(res.data.y[index])
          })
        })
      }
    }
    // 重画地图数据
    const initMapData = () => {
      myChart.value.clear()
      myChart.value.setOption(option.value);
    }
    watch(() => props.refresh, (val) => {
      getSvcData()
    })
    watch(() => areaCode.value, (val) => {
      mapData.value.map(item => {
        item.selected = item.code == val
      })
      initMapData()
    })

    onMounted(() => {
      init();
    });

    watch(() => areaData.value, (val) => {
      initMapData()
    });

    return {
      chartEl,
      areaList,
      areaCode,
      changeArea,
    }
  }
})
</script>

<style lang="scss" scoped>
.map-view {
  width: 100%;
  height: 100%;
  background-image: url(../../../../assets/bigscreen/map-bg.png);
  background-position: center;
  background-size: 98% 120%;
  background-repeat: no-repeat;
}

.goback {
  height: 40px;
  width: 127px;
  cursor: pointer;
  color: #fff;
  position: absolute;
  bottom: 35%;
  right: 22%;
  background-image: url(../../../../assets/screenboard/back.png);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.select-area {
  position: absolute;
  top: calc(7vw + 100px);
  left: 23vw;

  :deep(.el-input__inner) {
    background-color: rgba(46, 105, 235, 0.21) !important;
    border-color: RGBA(0, 70, 255, 1) !important;
    border-radius: 20px;
    text-align: center;
    color: #fff !important;
  }

  // FFA600
}
</style>